<template>
  <view class="container">
    <!-- Header with action buttons -->
    <view class="header">
      <text class="system-name">ERP权限管理系统</text>
      <uni-button type="primary" size="mini" @click="openAddPopup">新增角色</uni-button>
    </view>

    <!-- 权限管理列表 -->
    <uni-table :border="true">
      <uni-tr>
        <uni-th align="center">角色名称</uni-th>
        <uni-th align="center">描述</uni-th>
        <uni-th align="center">操作</uni-th>
      </uni-tr>
      <uni-tr v-for="role in roles" :key="role.id">
        <uni-td align="center">{{ role.name }}</uni-td>
        <uni-td align="center">{{ role.description }}</uni-td>
        <uni-td align="center">
          <uni-button type="default" size="mini" @click="openEditPopup(role)">编辑</uni-button>
          <uni-button type="error" size="mini" @click="openDeletePopup(role)">删除</uni-button>
        </uni-td>
      </uni-tr>
    </uni-table>

    <!-- 新增/编辑角色弹窗 -->
    <uni-popup ref="editPopup" type="center">
      <view class="popup-container">
        <h3>{{ currentRole.id ? '编辑角色' : '新增角色' }}</h3>
        <view class="form-row">
          <label>角色名称：</label>
          <input v-model="currentRole.name" placeholder="请输入角色名称" class="input-field"/>
        </view>
        <view class="form-row">
          <label>描述：</label>
          <input v-model="currentRole.description" placeholder="请输入描述" class="input-field"/>
        </view>
        <view class="button-group">
          <uni-button type="primary" size="small" @click="saveRole">保存</uni-button>
          <uni-button type="default" size="small" @click="closePopup">取消</uni-button>
        </view>
      </view>
    </uni-popup>

    <!-- 删除确认弹窗 -->
    <uni-popup ref="deletePopup" type="center">
      <view class="popup-container">
        <h3>确认删除</h3>
        <text>确定要删除 "{{ currentRole.name }}" 吗？</text>
        <view class="button-group">
          <uni-button type="error" size="small" @click="confirmDelete">删除</uni-button>
          <uni-button type="default" size="small" @click="closePopup">取消</uni-button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      roles: [
        { id: 1, name: '管理员', description: '拥有所有权限' },
        { id: 2, name: '编辑', description: '可以编辑内容' },
        { id: 3, name: '查看者', description: '只能查看内容' },
        // 更多角色
      ],
      currentRole: {},
    };
  },
  methods: {
    openAddPopup() {
      this.currentRole = { id: null, name: '', description: '' };
      this.$refs.editPopup.open();
    },
    openEditPopup(role) {
      this.currentRole = { ...role };
      this.$refs.editPopup.open();
    },
    closePopup() {
      this.$refs.editPopup.close();
      this.$refs.deletePopup.close();
    },
    saveRole() {
      if (this.currentRole.id) {
        const index = this.roles.findIndex(role => role.id === this.currentRole.id);
        this.roles.splice(index, 1, { ...this.currentRole });
      } else {
        const newId = this.roles.length ? Math.max(...this.roles.map(role => role.id)) + 1 : 1;
        this.currentRole.id = newId;
        this.roles.push({ ...this.currentRole });
      }
      this.closePopup();
    },
    openDeletePopup(role) {
      this.currentRole = { ...role };
      this.$refs.deletePopup.open();
    },
    confirmDelete() {
      const index = this.roles.findIndex(role => role.id === this.currentRole.id);
      if (index !== -1) {
        this.roles.splice(index, 1);
      }
      this.closePopup();
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #ecf0f1;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.system-name {
  font-size: 20px;
}

.popup-container {
  width: 80%;
  max-width: 500px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h3 {
  margin-bottom: 20px;
  text-align: center;
  color: #333;
}

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

label {
  width: 80px;
  color: #666;
  margin-right: 10px;
}

.input-field {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
}

.button-group {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.modal-button {
  flex: 1;
  padding: 10px 15px;
  margin: 0 5px;
  background-color: #1abc9c;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.modal-button.save:hover {
  background-color: #16a085;
}

.modal-button.cancel {
  background-color: #e74c3c;
}

.modal-button.cancel:hover {
  background-color: #c0392b;
}
</style>
